<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css" />
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <link rel="stylesheet" href="./plottingfont/plottingfont.css" />
    <script src="./jquery-1.8.3.min.js"></script>
    <script src="./dom-to-image.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    ">
    <div class="dddddd" style="width: 36px;">
        <img src="./haha.svg" alt="SVG Image" width="36" height="36">
    </div>
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
        const viewer = new Cesium.Viewer("map", {});
        viewer.scene.debugShowFramesPerSecond = true;

        function base64ToBlob(base64) {
            var parts = base64.split(';base64,');
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;
            var uInt8Array = new Uint8Array(rawLength);
            for (var i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
        }
        domtoimage.toPng(document.getElementsByClassName("dddddd")[0]).then(res => {
            var blob = base64ToBlob(res);
            var url = URL.createObjectURL(blob);

            var hello = viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
                billboard: {
                    image: url,
                    scale: 1,
                },
            });
        })

    </script>
</body>

</html>